<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="big">
        <ul>
            <li id="li_1">
                <div class="content div1">我是一个li</div>
            </li>
            <li>
                <div class="content div2">我是一个li</div>
            </li>
            <li>
                <div class="content div3">我是一个li</div>
            </li>
            <li>
                <div class="content div4">我是一个li</div>
            </li>
            <li>
                <div class="content div5">我是一个li</div>
            </li>
        </ul>
    </div>
    <script>
        // 1. 获取最大的div（第一个div）
        console.log(document.getElementsByClassName('big')[0]);
        console.log(document.getElementsByTagName('div')[0]);

        // 2.获取div3
        console.log(document.getElementsByClassName('div3')[0]);

        // 3.获取li_1对应的元素
        console.log(document.getElementById('li_1'));

        // querySelector系列
        // 获取最后一个div
        console.log(document.querySelector('.div5'));
        console.log(document.querySelectorAll('.div5')[0]);
        // 通过id获取
        console.log(document.querySelector('#li_1'));
        console.log(document.querySelector('li'));
    </script>
</body>
</html>